import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { Heart, Clock, Dumbbell, BarChart2, Award, Book, ChevronRight, ArrowLeft, Scale, Coffee, Utensils, Calendar, User } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义训练类型
interface Workout {
  id: string;
  name: string;
  type: 'aerobic' | 'strength';
  duration: string;
  intensity: string;
  heartRate?: string;
  exercises?: Exercise[];
  description: string;
}

// 定义训练动作类型
interface Exercise {
  id: string;
  name: string;
  equipment: string;
  sets: string;
  reps: string;
  rest: string;
  tips: string;
}

// 定义饮食计划类型
interface Meal {
  id: string;
  name: string;
  time: string;
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
  foods: Food[];
  description: string;
}

// 定义食物类型
interface Food {
  id: string;
  name: string;
  amount: string;
  calories: number;
  protein: number;
  carbs: number;
  fat: number;
}

// 健身计划数据
const weeklyPlan: Record<string, { day: string; workouts: Workout[] }> = {
  day1: {
    day: '周一',
    workouts: [
      {
        id: 'strength-1',
        name: '上半身力量训练',
        type: 'strength',
        duration: '60分钟',
        intensity: '中高强度',
        description: '专注于胸部、背部和肩部的力量训练',
        exercises: [
          {
            id: 'bench-press',
            name: '平板杠铃卧推',
            equipment: '杠铃、卧推架',
            sets: '4组',
            reps: '8-10次',
            rest: '90秒',
            tips: '保持核心收紧，避免腰部过度抬起'
          },
          {
            id: 'pull-ups',
            name: '引体向上',
            equipment: '单杠（可使用弹力带辅助）',
            sets: '4组',
            reps: '力竭',
            rest: '2分钟',
            tips: '保持身体稳定，避免摆动'
          },
          {
            id: 'overhead-press',
            name: '杠铃推举',
            equipment: '杠铃',
            sets: '3组',
            reps: '10-12次',
            rest: '60秒',
            tips: '保持核心收紧，避免腰部过度伸展'
          },
          {
            id: 'bent-over-row',
            name: '杠铃划船',
            equipment: '杠铃',
            sets: '3组',
            reps: '10-12次',
            rest: '60秒',
            tips: '保持背部平直，避免弯腰弓背'
          }
        ]
      }
    ]
  },
  day2: {
    day: '周二',
    workouts: [
      {
        id: 'aerobic-1',
        name: '爬楼机有氧',
        type: 'aerobic',
        duration: '40分钟',
        intensity: '中等强度',
        heartRate: '最大心率的65%-75%',
        description: '提高心肺功能，燃烧脂肪'
      }
    ]
  },
  day3: {
    day: '周三',
    workouts: [
      {
        id: 'strength-2',
        name: '下半身力量训练',
        type: 'strength',
        duration: '60分钟',
        intensity: '中高强度',
        description: '专注于腿部和臀部的力量训练',
        exercises: [
          {
            id: 'back-squat',
            name: '杠铃深蹲',
            equipment: '杠铃、深蹲架',
            sets: '4组',
            reps: '8-10次',
            rest: '90秒',
            tips: '保持膝盖与脚尖方向一致，避免内扣'
          },
          {
            id: 'deadlift',
            name: '罗马尼亚硬拉',
            equipment: '杠铃',
            sets: '3组',
            reps: '10-12次',
            rest: '90秒',
            tips: '保持背部挺直，感受腘绳肌的拉伸'
          },
          {
            id: 'leg-press',
            name: '腿举',
            equipment: '腿举机',
            sets: '3组',
            reps: '12-15次',
            rest: '60秒',
            tips: '调整合适的重量，确保动作幅度充分'
          },
          {
            id: 'leg-curl',
            name: '腿弯举',
            equipment: '腿弯举机',
            sets: '3组',
            reps: '12-15次',
            rest: '60秒',
            tips: '保持核心收紧，控制动作速度'
          }
        ]
      }
    ]
  },
  day4: {
    day: '周四',
    workouts: [
      {
        id: 'rest-1',
        name: '休息日',
        type: 'strength',
        duration: '-',
        intensity: '-',
        description: '适当休息，促进身体恢复'
      }
    ]
  },
  day5: {
    day: '周五',
    workouts: [
      {
        id: 'strength-3',
        name: '全身力量训练',
        type: 'strength',
        duration: '60分钟',
        intensity: '中等强度',
        description: '综合性的全身力量训练',
        exercises: [
          {
            id: 'push-ups',
            name: '俯卧撑',
            equipment: '无（可使用弹力带增加难度）',
            sets: '4组',
            reps: '力竭',
            rest: '60秒',
            tips: '保持身体成一条直线，避免塌腰'
          },
          {
            id: 'lunges',
            name: '箭步蹲',
            equipment: '哑铃（可选）',
            sets: '3组',
            reps: '每侧12次',
            rest: '60秒',
            tips: '保持前膝盖不超过脚踝，上半身挺直'
          },
          {
            id: 'plank',
            name: '平板支撑',
            equipment: '无',
            sets: '3组',
            reps: '60秒',
            rest: '45秒',
            tips: '保持核心收紧，身体成一条直线'
          },
          {
            id: 'dumbbell-rows',
            name: '哑铃单臂划船',
            equipment: '哑铃',
            sets: '3组',
            reps: '每侧12次',
            rest: '60秒',
            tips: '保持背部挺直，避免身体转动'
          }
        ]
      }
    ]
  },
  day6: {
    day: '周六',
    workouts: [
      {
        id: 'aerobic-2',
        name: '爬楼机有氧+间歇',
        type: 'aerobic',
        duration: '45分钟',
        intensity: '高强度间歇',
        heartRate: '最大心率的75%-85%（冲刺阶段）',
        description: '提高心肺功能和代谢水平'
      }
    ]
  },
  day7: {
    day: '周日',
    workouts: [
      {
        id: 'rest-2',
        name: '休息日',
        type: 'strength',
        duration: '-',
        intensity: '-',
        description: '完全休息或进行轻度活动，如散步、瑜伽'
      }
    ]
  }
};

// 饮食计划数据
const mealPlan: Meal[] = [
  {
    id: 'breakfast',
    name: '早餐',
    time: '07:00-08:00',
    calories: 450,
    protein: 25,
    carbs: 40,
    fat: 15,
    description: '营养均衡的早餐，提供上午所需能量',
    foods: [
      { name: '全麦面包', amount: '2片', calories: 160, protein: 6, carbs: 28, fat: 2 },
      { name: '水煮蛋', amount: '2个', calories: 140, protein: 12, carbs: 1, fat: 10 },
      { name: '希腊酸奶', amount: '100g', calories: 59, protein: 10, carbs: 3, fat: 0.4 },
      { name: '蓝莓', amount: '50g', calories: 28, protein: 0.5, carbs: 7, fat: 0.2 },
      { name: '坚果', amount: '10g', calories: 63, protein: 2, carbs: 3, fat: 5.4 }
    ]
  },
  {
    id: 'snack1',
    name: '上午加餐',
    time: '10:30-11:00',
    calories: 150,
    protein: 10,
    carbs: 15,
    fat: 5,
    description: '缓解饥饿感，保持能量稳定',
    foods: [
      { name: '苹果', amount: '1个', calories: 95, protein: 0.5, carbs: 25, fat: 0.3 },
      { name: '原味蛋白粉', amount: '10g', calories: 37, protein: 8, carbs: 1, fat: 0.5 }
    ]
  },
  {
    id: 'lunch',
    name: '午餐',
    time: '12:30-13:30',
    calories: 600,
    protein: 40,
    carbs: 50,
    fat: 20,
    description: '高蛋白、适量碳水的午餐，增强饱腹感',
    foods: [
      { name: '鸡胸肉', amount: '150g', calories: 165, protein: 31, carbs: 0, fat: 4 },
      { name: '糙米饭', amount: '120g', calories: 133, protein: 3.1, carbs: 28, fat: 1.1 },
      { name: '西兰花', amount: '150g', calories: 45, protein: 3.6, carbs: 7, fat: 0.4 },
      { name: '彩椒', amount: '100g', calories: 31, protein: 1, carbs: 7, fat: 0.3 },
      { name: '橄榄油', amount: '10g', calories: 90, protein: 0, carbs: 0, fat: 10 }
    ]
  },
  {
    id: 'snack2',
    name: '下午加餐',
    time: '15:30-16:00',
    calories: 150,
    protein: 15,
    carbs: 10,
    fat: 5,
    description: '为下午训练提供能量',
    foods: [
      { name: '水煮鸡蛋', amount: '1个', calories: 70, protein: 6, carbs: 0.5, fat: 5 },
      { name: '胡萝卜条', amount: '100g', calories: 41, protein: 0.9, carbs: 9.6, fat: 0.2 },
      { name: '花生酱', amount: '10g', calories: 59, protein: 2.5, carbs: 3, fat: 5 }
    ]
  },
  {
    id: 'dinner',
    name: '晚餐',
    time: '18:30-19:30',
    calories: 500,
    protein: 35,
    carbs: 40,
    fat: 15,
    description: '低热量、易消化的晚餐，适合减脂期间食用',
    foods: [
      { name: '三文鱼', amount: '120g', calories: 207, protein: 22, carbs: 0, fat: 13 },
      { name: '蒸红薯', amount: '100g', calories: 103, protein: 2, carbs: 23, fat: 0.2 },
      { name: '菠菜', amount: '150g', calories: 23, protein: 2.9, carbs: 3.6, fat: 0.4 },
      { name: '豆腐', amount: '80g', calories: 55, protein: 6, carbs: 1.5, fat: 3 }
    ]
  }
];

// 计算最大心率
const calculateMaxHeartRate = (age: number): number => {
  return 220 - age;
};

export default function PersonalizedFitnessPlan() {
  const { theme } = useTheme();
  const [activeDay, setActiveDay] = useState<string>('day1');
  const [activeTab, setActiveTab] = useState<'workout' | 'nutrition'>('workout');
  const [expandedExercise, setExpandedExercise] = useState<string | null>(null);
  const [expandedMeal, setExpandedMeal] = useState<string | null>(null);
  const [age, setAge] = useState<number>(30);
  const navigate = useNavigate();
  
  const maxHeartRate = calculateMaxHeartRate(age);
  const currentDayPlan = weeklyPlan[activeDay];
  
  const toggleExercise = (exerciseId: string) => {
    setExpandedExercise(expandedExercise === exerciseId ? null : exerciseId);
  };
  
  const toggleMeal = (mealId: string) => {
    setExpandedMeal(expandedMeal === mealId ? null : mealId);
  };
  
  // 计算每日营养摄入总计
  const dailyNutritionTotal = {
    calories: mealPlan.reduce((sum, meal) => sum + meal.calories, 0),
    protein: mealPlan.reduce((sum, meal) => sum + meal.protein, 0),
    carbs: mealPlan.reduce((sum, meal) => sum + meal.carbs, 0),
    fat: mealPlan.reduce((sum, meal) => sum + meal.fat, 0)
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
            个性化健身计划
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-green-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <div className="flex items-center justify-center mb-4">
                <User size={24} className="text-blue-600 dark:text-blue-400 mr-2" />
                <h2 className="text-2xl md:text-3xl font-bold">183cm / 79kg 个性化健身计划</h2>
              </div>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                本计划专为身高183cm、体重79kg的人群设计，结合有氧训练（爬楼机）和力量训练（基础器械），
                帮助你达成健身目标。计划包含每周训练安排、心率控制建议和详细的饮食指导。
              </p>
              
              {/* 心率计算器 */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md inline-block">
                <label htmlFor="age" className="text-sm text-slate-600 dark:text-slate-300 mr-2">你的年龄:</label>
                <input
                  id="age"
                  type="number"
                  value={age}
                  onChange={(e) => setAge(Math.max(1, Math.min(120, parseInt(e.target.value) || 0)))}
                  min="1"
                  max="120"
                  className="w-20 px-3 py-1 rounded-full text-center border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                />
                <span className="ml-4 text-sm font-medium">
                  最大心率: {maxHeartRate} 次/分钟
                </span>
                <div className="flex justify-center mt-2 text-xs text-slate-500 dark:text-slate-400">
                  <span className="mr-4">有氧目标心率: {Math.round(maxHeartRate * 0.65)}-{Math.round(maxHeartRate * 0.75)} 次/分钟</span>
                  <span>间歇目标心率: {Math.round(maxHeartRate * 0.75)}-{Math.round(maxHeartRate * 0.85)} 次/分钟</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 主内容区域 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            {/* 标签页导航 */}
            <div className="flex justify-center mb-8">
              <div className="bg-slate-100 dark:bg-slate-800 rounded-full p-1 flex">
                <button
                  onClick={() => setActiveTab('workout')}
                  className={`px-6 py-2 rounded-full transition-all duration-300 font-medium ${
                    activeTab === 'workout'
                      ? 'bg-blue-600 text-white shadow-lg'
                      : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
                  }`}
                >
                  训练计划
                </button>
                <button
                  onClick={() => setActiveTab('nutrition')}
                  className={`px-6 py-2 rounded-full transition-all duration-300 font-medium ${
                    activeTab === 'nutrition'
                      ? 'bg-green-600 text-white shadow-lg'
                      : 'text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700'
                  }`}
                >
                  饮食计划
                </button>
              </div>
            </div>

            {/* 训练计划内容 */}
            {activeTab === 'workout' && (
              <div className="max-w-5xl mx-auto">
                {/* 周计划概览 */}
                <div className="mb-10">
                  <h3 className="text-xl font-bold mb-6 flex items-center">
                    <Calendar size={20} className="mr-2 text-blue-600 dark:text-blue-400" />
                    每周训练概览
                  </h3>
                  <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-3">
                      {Object.entries(weeklyPlan).map(([key, plan]) => (
                        <div
                          key={key}
                          className={`rounded-xl p-4 cursor-pointer transition-all duration-300 text-center ${
                            activeDay === key
                              ? 'bg-blue-600 text-white shadow-lg'
                              : 'bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700'
                          }`}
                          onClick={() => setActiveDay(key)}
                        >
                          <div className="font-medium mb-2">{plan.day}</div>
                          <div className="text-sm">
                            {plan.workouts.map((workout, index) => (
                              <div 
                                key={workout.id}
                                className={`flex items-center justify-center mb-1 ${index < plan.workouts.length - 1 ? 'mb-2' : ''}`}
                              >
                                {workout.type === 'aerobic' ? (
                                  <Heart size={14} className={`mr-1 ${activeDay === key ? 'text-white' : 'text-blue-600 dark:text-blue-400'}`} />
                                ) : workout.type === 'strength' ? (
                                  workout.name.includes('休息') ? (
                                    <Coffee size={14} className={`mr-1 ${activeDay === key ? 'text-white' : 'text-green-600 dark:text-green-400'}`} />
                                  ) : (
                                    <Dumbbell size={14} className={`mr-1 ${activeDay === key ? 'text-white' : 'text-green-600 dark:text-green-400'}`} />
                                  )
                                ) : null}
                                <span className="truncate">{workout.name}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* 每日训练详情 */}
                <div>
                  <h3 className="text-xl font-bold mb-6 flex items-center">
                    <Clock size={20} className="mr-2 text-blue-600 dark:text-blue-400" />
                    {currentDayPlan.day} 训练详情
                  </h3>
                  <div className="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg">
                    {currentDayPlan.workouts.map((workout) => (
                      <div key={workout.id} className="border-b border-slate-200 dark:border-slate-700 last:border-b-0">
                        <div className="p-6">
                          <div className="flex flex-wrap items-center justify-between mb-4">
                            <div className="flex items-center mb-2 sm:mb-0">
                              <div className={`w-10 h-10 rounded-full flex items-center justify-center mr-3 ${
                                workout.type === 'aerobic' 
                                  ? 'bg-blue-100 dark:bg-blue-900/50' 
                                  : workout.name.includes('休息')
                                    ? 'bg-green-100 dark:bg-green-900/50'
                                    : 'bg-green-100 dark:bg-green-900/50'
                              }`}>
                                {workout.type === 'aerobic' ? (
                                  <Heart size={18} className="text-blue-600 dark:text-blue-400" />
                                ) : workout.name.includes('休息') ? (
                                  <Coffee size={18} className="text-green-600 dark:text-green-400" />
                                ) : (
                                  <Dumbbell size={18} className="text-green-600 dark:text-green-400" />
                                )}
                              </div>
                              <h4 className="text-lg font-semibold">{workout.name}</h4>
                            </div>
                            <div className="flex items-center gap-4">
                              <div className="flex items-center text-sm text-slate-600 dark:text-slate-300">
                                <Clock size={16} className="mr-1" />
                                <span>{workout.duration}</span>
                              </div>
                              <div className="px-3 py-1 rounded-full text-xs font-medium bg-slate-100 dark:bg-slate-700">
                                {workout.intensity}
                              </div>
                            </div>
                          </div>
                          
                          <p className="text-slate-600 dark:text-slate-300 mb-4">{workout.description}</p>
                          
                          {workout.heartRate && (
                            <div className="flex items-center mb-4 text-sm text-blue-600 dark:text-blue-400">
                              <Heart size={16} className="mr-1" />
                              <span>目标心率范围: {workout.heartRate}</span>
                            </div>
                          )}
                          
                          {/* 训练动作列表 */}
                          {workout.exercises && workout.exercises.length > 0 && (
                            <div className="space-y-3">
                              {workout.exercises.map((exercise) => (
                                <div 
                                  key={exercise.id}
                                  className={`rounded-xl overflow-hidden transition-all duration-300 ${
                                    expandedExercise === exercise.id 
                                      ? 'ring-2 ring-blue-500 dark:ring-blue-400' 
                                      : 'bg-slate-50 dark:bg-slate-700/50'
                                  }`}
                                >
                                  <div 
                                    className="flex items-center justify-between p-4 cursor-pointer"
                                    onClick={() => toggleExercise(exercise.id)}
                                  >
                                    <div className="flex items-center">
                                      <div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mr-3">
                                        <Dumbbell size={16} className="text-blue-600 dark:text-blue-400" />
                                      </div>
                                      <div>
                                        <h5 className="font-medium">{exercise.name}</h5>
                                        <p className="text-xs text-slate-500 dark:text-slate-400">{exercise.equipment}</p>
                                      </div>
                                    </div>
                                    <div className="flex items-center">
                                      <div className="flex items-center mr-4 text-sm">
                                        <span className="mr-2">{exercise.sets}</span>
                                        <span className="mr-2">{exercise.reps}</span>
                                        <span>{exercise.rest}</span>
                                      </div>
                                      <ChevronRight 
                                        size={16} 
                                        className={`transition-transform duration-300 ${
                                          expandedExercise === exercise.id ? 'rotate-90' : ''
                                        }`}
                                      />
                                    </div>
                                  </div>
                                  
                                  {/* 展开内容 */}
                                  {expandedExercise === exercise.id && (
                                    <div className="p-4 pt-0 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800">
                                      <div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-lg">
                                        <h6 className="font-medium mb-2 flex items-center">
                                          <Award size={14} className="mr-2 text-blue-600 dark:text-blue-400" />
                                          训练小贴士
                                        </h6>
                                        <p className="text-sm text-slate-600 dark:text-slate-300">{exercise.tips}</p>
                                      </div>
                                    </div>
                                  )}
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* 饮食计划内容 */}
            {activeTab === 'nutrition' && (
              <div className="max-w-5xl mx-auto">
                {/* 每日营养概览 */}
                <div className="mb-10">
                  <h3 className="text-xl font-bold mb-6 flex items-center">
                    <Scale size={20} className="mr-2 text-green-600 dark:text-green-400" />
                    每日营养摄入概览
                  </h3>
                  <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                      <div className="bg-slate-50 dark:bg-slate-700 rounded-xl p-4 flex flex-col items-center justify-center">
                        <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">总热量</h4>
                        <p className="text-2xl font-bold">{dailyNutritionTotal.calories} 大卡</p>
                      </div>
                      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                        <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">蛋白质</h4>
                        <p className="text-2xl font-bold">{dailyNutritionTotal.protein}g</p>
                      </div>
                      <div className="bg-yellow-50 dark:bg-yellow-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                        <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">碳水化合物</h4>
                        <p className="text-2xl font-bold">{dailyNutritionTotal.carbs}g</p>
                      </div>
                      <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                        <h4 className="text-sm text-slate-500 dark:text-slate-400 mb-1">脂肪</h4>
                        <p className="text-2xl font-bold">{dailyNutritionTotal.fat}g</p>
                      </div>
                    </div>
                    
                    <div className="bg-slate-50 dark:bg-slate-700/50 p-4 rounded-xl">
                      <h4 className="font-medium mb-2">饮食原则</h4>
                      <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                        <li>高蛋白饮食有助于维持肌肉量，促进代谢</li>
                        <li>适量的复合碳水化合物提供持续能量</li>
                        <li>选择健康脂肪，如坚果、橄榄油和鱼油</li>
                        <li>每天饮水2000-3000毫升，保持身体水分平衡</li>
                        <li>避免精制糖和加工食品，选择天然、未加工的食物</li>
                      </ul>
                    </div>
                  </div>
                </div>

                {/* 餐食详情 */}
                <div>
                  <h3 className="text-xl font-bold mb-6 flex items-center">
                    <Utensils size={20} className="mr-2 text-green-600 dark:text-green-400" />
                    每日饮食计划
                  </h3>
                  <div className="space-y-4">
                    {mealPlan.map((meal) => (
                      <div 
                        key={meal.id}
                        className={`rounded-2xl overflow-hidden transition-all duration-300 ${
                          expandedMeal === meal.id 
                            ? 'ring-2 ring-green-500 dark:ring-green-400' 
                            : 'bg-white dark:bg-slate-800 shadow-lg'
                        }`}
                      >
                        <div 
                          className="flex flex-col md:flex-row cursor-pointer"
                          onClick={() => toggleMeal(meal.id)}
                        >
                          <div className="md:w-1/3 p-6">
                            <div className="flex items-center mb-3">
                              <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mr-3">
                                <Utensils size={18} className="text-green-600 dark:text-green-400" />
                              </div>
                              <div>
                                <h4 className="font-semibold">{meal.name}</h4>
                                <p className="text-sm text-slate-500 dark:text-slate-400">{meal.time}</p>
                              </div>
                            </div>
                            <p className="text-slate-600 dark:text-slate-300 mb-3 text-sm">{meal.description}</p>
                            <div className="flex flex-wrap gap-2">
                              <span className="px-3 py-1 bg-slate-100 dark:bg-slate-700 rounded-full text-xs">
                                {meal.calories} 大卡
                              </span>
                              <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900/50 rounded-full text-xs">
                                蛋白质 {meal.protein}g
                              </span>
                              <span className="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/50 rounded-full text-xs">
                                碳水 {meal.carbs}g
                              </span>
                              <span className="px-3 py-1 bg-green-100 dark:bg-green-900/50 rounded-full text-xs">
                                脂肪 {meal.fat}g
                              </span>
                            </div>
                          </div>
                          <div className="md:w-2/3 p-6 border-t md:border-t-0 md:border-l border-slate-200 dark:border-slate-700">
                            <h5 className="font-medium mb-3">食物组成</h5>
                            <div className="overflow-x-auto">
                              <table className="w-full text-left">
                                <thead>
                                  <tr className="border-b border-slate-200 dark:border-slate-700">
                                    <th className="pb-2 font-medium text-sm">食物</th>
                                    <th className="pb-2 font-medium text-sm">用量</th>
                                    <th className="pb-2 font-medium text-sm">热量(大卡)</th>
                                    <th className="pb-2 font-medium text-sm">蛋白质(g)</th>
                                    <th className="pb-2 font-medium text-sm">碳水(g)</th>
                                    <th className="pb-2 font-medium text-sm">脂肪(g)</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {meal.foods.map((food, index) => (
                                    <tr key={index} className="border-b border-slate-100 dark:border-slate-800">
                                      <td className="py-2 text-sm">{food.name}</td>
                                      <td className="py-2 text-sm">{food.amount}</td>
                                      <td className="py-2 text-sm">{food.calories}</td>
                                      <td className="py-2 text-sm">{food.protein}</td>
                                      <td className="py-2 text-sm">{food.carbs}</td>
                                      <td className="py-2 text-sm">{food.fat}</td>
                                    </tr>
                                  ))}
                                  <tr className="font-medium">
                                    <td className="py-2 text-sm">小计</td>
                                    <td className="py-2 text-sm">-</td>
                                    <td className="py-2 text-sm">{meal.calories}</td>
                                    <td className="py-2 text-sm">{meal.protein}</td>
                                    <td className="py-2 text-sm">{meal.carbs}</td>
                                    <td className="py-2 text-sm">{meal.fat}</td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* 健身建议 */}
        <section className="py-12 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              <h3 className="text-2xl font-bold mb-8 text-center">健身与饮食建议</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Dumbbell size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">训练建议</h4>
                  <ul className="list-disc list-inside space-y-2 text-sm text-slate-600 dark:text-slate-300">
                    <li>确保充分热身和拉伸，减少受伤风险</li>
                    <li>爬楼机训练时保持正确姿势，避免弯腰驼背</li>
                    <li>力量训练时选择合适重量，确保动作标准</li>
                    <li>训练后保证7-9小时的优质睡眠，促进恢复</li>
                    <li>每周监测体重和身体围度变化，调整训练计划</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/50 flex items-center justify-center mb-4">
                    <Utensils size={20} className="text-green-600 dark:text-green-400" />
                  </div>
                  <h4 className="font-semibold mb-2">饮食建议</h4>
                  <ul className="list-disc list-inside space-y-2 text-sm text-slate-600 dark:text-slate-300">
                    <li>每天喝够8-12杯水，保持身体水分充足</li>
                    <li>训练前后30分钟内补充蛋白质和简单碳水</li>
                    <li>选择全谷物、瘦肉、鱼类、蔬菜和水果等天然食物</li>
                    <li>避免高糖、高脂、高盐的加工食品</li>
                    <li>可以适当安排"欺骗餐"，缓解心理压力</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-4">
                    <Heart size={20} className="text-purple-600 dark:text-purple-400" />
                  </div>
                  <h4 className="font-semibold mb-2">心率控制</h4>
                  <ul className="list-disc list-inside space-y-2 text-sm text-slate-600 dark:text-slate-300">
                    <li>有氧训练时保持心率在最大心率的65%-75%</li>
                    <li>间歇训练时冲刺阶段心率可达75%-85%</li>
                    <li>如果感到头晕、呼吸急促，应立即降低强度</li>
                    <li>可以使用心率监测设备帮助控制训练强度</li>
                    <li>随着体能提升，相同强度下的心率会逐渐降低</li>
                  </ul>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center mb-4">
                    <Award size={20} className="text-orange-600 dark:text-orange-400" />
                  </div>
                  <h4 className="font-semibold mb-2">长期坚持</h4>
                  <ul className="list-disc list-inside space-y-2 text-sm text-slate-600 dark:text-slate-300">
                    <li>健身是一个长期过程，通常需要3-6个月才能看到明显效果</li>
                    <li>保持积极的心态，不要因为短期没有效果而放弃</li>
                    <li>可以寻找健身伙伴，互相鼓励，提高坚持的动力</li>
                    <li>记录训练和饮食情况，定期总结和调整</li>
                    <li>享受健身过程，将其融入日常生活</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 个性化健身计划 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}